<template>
  <div class="tab-switch">
    <div 
      v-for="(item, index) in switchNames" 
      class="switch-item hover-style" 
      :class="activeTabIndex == index ? 'active' : ''"
      @click="handleUpdateIndex(index)"
      :key="item.id"
    >
      {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    switchNames: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            name: '全部',
          },
          {
            id: 2,
            name: '系统公告'
          },
          {
            id: 3,
            name: '站内消息'
          }
        ]
      }
    },
    activeTabIndex: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleUpdateIndex(index) {
      this.$emit('click', index)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .tab-switch 
    display flex 
    border-top-left-radius 3px 
    border-top-right-radius 3px
    border-bottom none 
    // width 240px
    overflow hidden
    background-color $color-text-button
    .switch-item 
      width 80px 
      height 36px 
      display flex 
      align-items center 
      justify-content center
      border-right 1px solid $color-divide-line 
      border-top 1px solid $color-divide-line
      box-sizing border-box
      font-size 15px 
      font-weight 700
      @media screen and (max-width 750px)
        height 30px
        border-bottom 1px solid $color-divide-line
      &:first-child 
        border-left 1px solid $color-divide-line
        border-top-left-radius 3px 
        @media screen and (max-width 750px)
          border-bottom-left-radius 3p
      &:last-child  
        border-top-right-radius 3px
        @media screen and (max-width 750px)
          border-bottom-right-radius 3px
      &.active 
        background:linear-gradient(0deg,#b42020,#e02828)
        // border:1px solid rgba(184, 33, 33, 1)
        border-top 1px solid $color-theme-red
        box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.1)
        color: #fff
     
        
</style>